import React, { Component } from 'react'


import './index.css'


import axios from 'axios'


//引入获取热门城市的函数
// export let reqCityList=(data={})=API.get('/area/city',{data})
import { reqHotCity, reqCityList } from '../../utils/index'


//引入当前城市信息 

import { getCurCity } from '../../utils/city'

// 第一部分  步骤
// 打开 antd-mobile 组件库的 NavBar 导航栏组件 文档。
// 从文档中拷贝组件示例代码到项目中，让其正确运行。
// 修改导航栏样式和结构。


// 第一步 引入  antd-mobile  
import { NavBar, Icon } from 'antd-mobile';










// 插件使用

// import {Column, Table} from 'react-virtualized';
// import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
// import List from 'react-virtualized/dist/commonjs/List';
// import { List } from 'react-virtualized';

import { AutoSizer, List } from 'react-virtualized';

// const list = [
//     'Brian Vaughn',
//     // And so on...
// ]
// var list = [];
// list = list.from({length:100}).fill('你好呀')

// for(var i=0;i<=100;i++) {
//     list.push('Brian Vaughn'+i)
// }





// function rowRenderer({
//     key, // Unique key within array of rows
//     index, // Index of row within collection
//     isScrolling, // The List is currently being scrolled
//     isVisible, // This row is visible within the List (eg it is not an overscanned row)
//     style, // Style object to be applied to row (to position it)
// }) {
//     return (

//          <div>  
//              <h3> title --A---B</h3>
//              <ul>
//                  <li>   安庆</li>
//                  <li>安阳</li>
//              </ul>
//          </div>
//     );
// }





// 索引（A、B等）的高度
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50






export default class CityList extends Component {

    constructor(props) {
        super(props)
        this.state = {
            hotCItys: [],
            goodCityNum: [],
            goodCityList: {}
        }

    }



    // 生命周期钩子函数
    async componentDidMount() {

        // // 获取热门城市
        // var data = await reqHotCity()

        // var hotCItys = data.body

        // // 获取城市信息

        // let res = await axios.get('http://e.ludir.cn:8081/area/city?level=1')
        // var { goodCityNum, goodCityList } = formatLetter(res.data.body)


        // //组装最后的成型数据

        // goodCityList['hot'] = hotCItys
        // goodCityNum.unshift('hot')

        // //当前城市的位置信息 

        // let curData = await getCurCity()
        // console.log(curData)

        // var curCity = {
        //     "label": curData
        // }


        // goodCityList['#'] = [curCity]
        // goodCityNum.unshift('#')


        // 这个是异步
        // this.setState({
        //     goodCityNum,
        //     goodCityList

        // })



        await this.getCityList()  //  区别就是等待 这个getCityList 必须全部走完再去执行后面的代码
        // this.getCityList() 


    }


    // 获取城市列表 
    async getCityList() {
        //获取热门城市
        var data = await reqHotCity()
        var hotCItys = data.body
        // 获取城市信息

        let res = await axios.get('http://e.ludir.cn:8081/area/city?level=1')
        var { goodCityNum, goodCityList } = formatLetter(res.data.body)
        //组装最后的成型数据

        goodCityList['hot'] = hotCItys
        goodCityNum.unshift('hot')

        //当前城市的位置信息 

        let curData = await getCurCity()
        console.log(curData)

        var curCity = {
            "label": curData
        }


        goodCityList['#'] = [curCity]
        goodCityNum.unshift('#')


        this.setState({
            goodCityNum,
            goodCityList

        })

    }





    rowRenderer = ({
        key, // Unique key within array of rows
        index, // 索引号
        isScrolling, // 当前项是否正在滚动中
        isVisible, // 当前项在 List 中是可见的
        style // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
    }) => {
        // console.log(this.state)
        var { goodCityNum, goodCityList } = this.state
        // console.log('goodCityNum', goodCityNum)
        // console.log("goodCityList",goodCityList)
        // console.log('index', goodCityNum[index])
        // console.log('key', key)

        // console.log(goodCityList[goodCityNum[index]])

        return (

            <div key={key} style={style} className="city">
                {/* formWord(goodCityNum[index]) */}
                <div className="title">{formWord(goodCityNum[index])}</div>
                {goodCityList[goodCityNum[index]].map(item => (
                    //  onClick={() => this.changeCity(item)}
                    <div
                        className="name"
                        key={item.value}

                    >
                        {item.label}
                    </div>
                ))}
            </div>


        );
    }




    //每一row的高度 =  标题的高度 +  文本内容的高度(每个数组的长度*每一行高度) 
    rowHeight = ({ index }) => {
        var { goodCityNum, goodCityList } = this.state

        console.log(index)

        return TITLE_HEIGHT*1 + goodCityList[goodCityNum[index]].length * NAME_HEIGHT
    }






    navBack = () => {
        this.props.history.go(-1)
    }
    render() {
        // console.log(this.state.goodCityNum, this.state.goodCityList)
        var { goodCityNum, goodCityList } = this.state
        return (
            <div className='NavBox'>
                {/* 我是城市选择组件 */}
                <NavBar className='navBar'
                    onLeftClick={this.navBack} mode="dark"

                    // icon={<Icon type="left" />}
                    icon={<i className='iconfont icon-back'></i>}
                >
                    城市选择---

                </NavBar>




                <h2> 长列表渲染   </h2>

                <AutoSizer>
                    {({ height, width }) => (
                        <List
                            height={height}
                            rowCount={goodCityNum.length}  // 必须关联数组的长度
                            rowHeight={this.rowHeight}
                            rowRenderer={this.rowRenderer}
                            width={width}
                        />
                    )}
                </AutoSizer>



            </div>
        )
    }
}




// 4.3 获取并处理城市列表数据
// 步骤
// 页面加载时，根据接口获取城市列表数据。
// 分析当前数据格式以及该功能需要的数据格式。
// 转化当前数据格式为所需数据格式。

// 获取热门城市数据，并添加到现有数据列表中（顺序）。  





//4.3.5    获取当前定位城市数据，并添加到现有数据列表中。(优先)  完成 




//4.3.4   获取热门城市数据，并添加到现有数据列表中（顺序）。   实现调用 

// var hotCItys = ''  //热门数据

// var goodCityNum = [] // 城市列表对应的英文字母序号

// var goodCityList = {}   //  城市列表数据处理完成



// //获取热门数据
// async function hotCity() {

//    hotCItys = await reqHotCity()

//     // console.log(hotCItys)
// }
// hotCity()



//4.4.1  reqCityList 获取城市列表 
// rs

// fetch('http://e.ludir.cn:8081/area/city?level=1').then(res=>{
//       return res.json()
// }).then(data=>{
//     console.log('城市列表',data)
// })



// 获取城市列表

// {
//     label: "北京"
//     pinyin: "beijing"
//     short: "bj"
//     value: "AREA|88cff55c-aaa4-e2e0"
// }





// / 接口返回的数据格式：
// [{ "label": "北京", "value": "", "pinyin": "beijing", "short": "bj" }]
// // 渲染城市列表的数据格式为：
// { a: [{}, {}], b: [{}, ...] }
// // 渲染右侧索引的数据格式为：
// ['a', 'b']




// 页面加载时，根据接口获取城市列表数据。
// function  getAreaCity () {

//     // axios.get('http://e.ludir.cn:8081/area/city?level=1').then(res => {
//     //     console.log('城市列表', res.data.body)
//     //     var  {goodCityNum,goodCityList}    =    formatLetter(res.data.body)
//     //     goodCityNum=goodCityNum
//     //     goodCityList=goodCityList



//     // })

//     let res= await   axios.get('http://e.ludir.cn:8081/area/city?level=1')



// }





// axios.get('http://e.ludir.cn:8081/area/city?level=1').then(res => {
//     console.log('城市列表', res.data.body)


//     //  第一步 按照 a-z 排列出来  

//    var  {goodCityNum,goodCityList}    =    formatLetter(res.data.body)

// //    console.log(goodCityNum,goodCityList)

//    goodCityNum=goodCityNum
//    goodCityList=goodCityList

// })














// 分析当前数据格式以及该功能需要的数据格式。
// 转化当前数据格式为所需数据格式。


function formatLetter(arrList) {
    // 这里我们的具体数据处理
    var goodCityList = {}
    var goodCityNum = [];


    arrList.forEach((item, index) => {
        let everyLetter = item.short.substr(0, 1).toUpperCase()  //  B
        // console.log(everyLetter)  //B 



        //  需要去重复  a 或者 b 
        if (goodCityList[everyLetter]) {  // 如果有这个字母
            //    只追加含有这个字母的内容
            // 第二次走这里
            goodCityList[everyLetter].push(item)

        } else { //没有这个字母 我就追加到对象里面去

            //  alert('第一次必须先走')
            // 第一次必须先走
            // goodCityList[everyLetter]=[];


            // goodCityList[everyLetter].push(item)


            goodCityList[everyLetter] = [item]
            // console.log(goodCityList)
        }

    })

    // console.log("goodCityList", goodCityList) 

    goodCityNum = Object.keys(goodCityList).sort()

    //    console.log("goodCityNum",   goodCityNum  )                            

    return {

        goodCityList,
        goodCityNum

    }
}





// 字母转换处理 
function formWord(letter) {

    switch (letter) {
        case '#':
            return '当前城市'

        case 'hot':
            return '热门城市'


        default:
            return letter

    }
}













